<template>
  <div class="min-h-screen p-6" style="background-color: #FAF9F5;">
    <!-- 页面头部 -->
    <div class="mb-6">
      <div class="flex items-center justify-between">
        <div>
          <h1 class="text-2xl font-bold text-gray-900">财务管理</h1>
          <p class="mt-1 text-sm text-gray-600">管理缴费项目、收费标准、财务统计等相关事务</p>
        </div>
        <div class="flex items-center gap-3">
          <button
            @click="showAddItemModal = true"
            class="inline-flex items-center px-4 py-2 text-white text-sm font-medium rounded-[0.6rem] border border-gray-300 hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all duration-200 active:scale-[0.985]"
            style="background-color: #3B82F6; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);"
          >
            <PlusIcon class="w-4 h-4 mr-2" />
            新增缴费项目
          </button>
          <button
            @click="handleExportReport"
            class="inline-flex items-center px-4 py-2 text-white text-sm font-medium rounded-[0.6rem] border border-gray-300 hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-all duration-200 active:scale-[0.985]"
            style="background-color: #10B981; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);"
          >
            <DocumentArrowDownIcon class="w-4 h-4 mr-2" />
            导出报告
          </button>
        </div>
      </div>
    </div>

    <!-- 财务统计卡片 -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
      <div class="rounded-[0.6rem] border border-gray-200 p-6" style="background-color: #FAF9F5; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);">
        <div class="flex items-center">
          <div class="flex-shrink-0">
            <CurrencyDollarIcon class="h-8 w-8 text-green-600" />
          </div>
          <div class="ml-4">
            <p class="text-sm font-medium text-gray-500">总收入</p>
            <p class="text-2xl font-semibold text-gray-900">¥{{ formatMoney(totalIncome) }}</p>
            <p class="text-xs text-green-600">+12.5% 较上月</p>
          </div>
        </div>
      </div>
      <div class="rounded-[0.6rem] border border-gray-200 p-6" style="background-color: #FAF9F5; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);">
        <div class="flex items-center">
          <div class="flex-shrink-0">
            <BanknotesIcon class="h-8 w-8 text-blue-600" />
          </div>
          <div class="ml-4">
            <p class="text-sm font-medium text-gray-500">已缴费</p>
            <p class="text-2xl font-semibold text-gray-900">¥{{ formatMoney(paidAmount) }}</p>
            <p class="text-xs text-blue-600">{{ paidRate }}% 缴费率</p>
          </div>
        </div>
      </div>
      <div class="rounded-[0.6rem] border border-gray-200 p-6" style="background-color: #FAF9F5; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);">
        <div class="flex items-center">
          <div class="flex-shrink-0">
            <ExclamationTriangleIcon class="h-8 w-8 text-yellow-600" />
          </div>
          <div class="ml-4">
            <p class="text-sm font-medium text-gray-500">待缴费</p>
            <p class="text-2xl font-semibold text-gray-900">¥{{ formatMoney(unpaidAmount) }}</p>
            <p class="text-xs text-yellow-600">{{ unpaidCount }} 人未缴</p>
          </div>
        </div>
      </div>
      <div class="rounded-[0.6rem] border border-gray-200 p-6" style="background-color: #FAF9F5; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);">
        <div class="flex items-center">
          <div class="flex-shrink-0">
            <ClockIcon class="h-8 w-8 text-red-600" />
          </div>
          <div class="ml-4">
            <p class="text-sm font-medium text-gray-500">逾期未缴</p>
            <p class="text-2xl font-semibold text-gray-900">¥{{ formatMoney(overdueAmount) }}</p>
            <p class="text-xs text-red-600">{{ overdueCount }} 人逾期</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 财务图表 -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
      <div class="rounded-[0.6rem] border border-gray-200 p-6" style="background-color: #FAF9F5; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);">
        <h2 class="text-lg font-medium text-gray-900 mb-4">收入趋势</h2>
        <div ref="incomeChartContainer" class="h-64"></div>
      </div>
      <div class="rounded-[0.6rem] border border-gray-200 p-6" style="background-color: #FAF9F5; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);">
        <h2 class="text-lg font-medium text-gray-900 mb-4">缴费项目分布</h2>
        <div ref="pieChartContainer" class="h-64"></div>
      </div>
    </div>

    <!-- 搜索和筛选 -->
    <div class="rounded-[0.6rem] border border-gray-200 p-6 mb-6" style="background-color: #FAF9F5; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);">
      <div class="grid grid-cols-1 md:grid-cols-5 gap-4">
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-2">项目名称</label>
          <input
            v-model="searchForm.keyword"
            type="text"
            placeholder="请输入项目名称"
            class="w-full px-3 py-2 border border-gray-300 rounded-[0.6rem] focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200"
            style="background-color: #F5F5F0; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);"
          />
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-2">项目类型</label>
          <select
            v-model="searchForm.type"
            class="w-full px-3 py-2 border border-gray-300 rounded-[0.6rem] focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200"
            style="background-color: #F5F5F0; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);"
          >
            <option value="">全部类型</option>
            <option value="学费">学费</option>
            <option value="住宿费">住宿费</option>
            <option value="教材费">教材费</option>
            <option value="保险费">保险费</option>
            <option value="其他费用">其他费用</option>
          </select>
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-2">状态</label>
          <select
            v-model="searchForm.status"
            class="w-full px-3 py-2 border border-gray-300 rounded-[0.6rem] focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200"
            style="background-color: #F5F5F0; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);"
          >
            <option value="">全部状态</option>
            <option value="启用">启用</option>
            <option value="禁用">禁用</option>
          </select>
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-2">缴费期限</label>
          <select
            v-model="searchForm.deadline"
            class="w-full px-3 py-2 border border-gray-300 rounded-[0.6rem] focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200"
            style="background-color: #F5F5F0; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);"
          >
            <option value="">全部期限</option>
            <option value="未到期">未到期</option>
            <option value="即将到期">即将到期</option>
            <option value="已到期">已到期</option>
          </select>
        </div>
        <div class="flex items-end gap-2">
          <button
            @click="handleSearch"
            class="flex-1 px-4 py-2 text-white text-sm font-medium rounded-[0.6rem] border border-gray-300 hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all duration-200 active:scale-[0.985]"
            style="background-color: #3B82F6; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);"
          >
            <MagnifyingGlassIcon class="w-4 h-4 mr-2 inline" />
            搜索
          </button>
          <button
            @click="handleReset"
            class="px-4 py-2 text-gray-700 text-sm font-medium rounded-[0.6rem] border border-gray-300 hover:border-gray-400 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-all duration-200 active:scale-[0.985]"
            style="background-color: #F5F5F0; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);"
          >
            重置
          </button>
        </div>
      </div>
    </div>

    <!-- 缴费项目列表 -->
    <div class="rounded-[0.6rem] border border-gray-200" style="background-color: #FAF9F5; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);">
      <div class="px-6 py-4 border-b border-gray-200">
        <div class="flex items-center justify-between">
          <h2 class="text-lg font-medium text-gray-900">缴费项目列表</h2>
          <div class="flex items-center gap-4">
            <span class="text-sm text-gray-500">共 {{ filteredItems.length }} 个项目</span>
            <div class="flex items-center gap-2">
              <button
                @click="handleBatchEnable"
                :disabled="selectedItems.length === 0"
                class="px-3 py-1.5 text-sm font-medium text-green-600 rounded-[0.6rem] border border-gray-300 hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 active:scale-[0.985]"
                style="background-color: #F0FDF4; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);"
              >
                <CheckCircleIcon class="w-4 h-4 mr-1 inline" />
                批量启用
              </button>
              <button
                @click="handleExport"
                class="px-3 py-1.5 text-sm font-medium text-blue-600 rounded-[0.6rem] border border-gray-300 hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all duration-200 active:scale-[0.985]"
                style="background-color: #EFF6FF; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);"
              >
                <ArrowDownTrayIcon class="w-4 h-4 mr-1 inline" />
                导出
              </button>
            </div>
          </div>
        </div>
      </div>

      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
          <thead class="bg-gray-50">
            <tr>
              <th class="px-6 py-3 text-left">
                <input
                  type="checkbox"
                  :checked="selectedItems.length === filteredItems.length && filteredItems.length > 0"
                  @change="handleSelectAll"
                  class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
                />
              </th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">项目信息</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">收费标准</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">适用对象</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">缴费期限</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">收费统计</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
            </tr>
          </thead>
          <tbody class="bg-white divide-y divide-gray-200">
            <tr v-for="item in paginatedItems" :key="item.id" class="hover:bg-gray-50">
              <td class="px-6 py-4">
                <input
                  type="checkbox"
                  :value="item.id"
                  v-model="selectedItems"
                  class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
                />
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <div>
                  <div class="text-sm font-medium text-gray-900">{{ item.name }}</div>
                  <div class="text-sm text-gray-500">{{ item.type }}</div>
                  <div class="text-xs text-gray-400">{{ item.code }}</div>
                </div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="text-sm font-medium text-gray-900">¥{{ formatMoney(item.amount) }}</div>
                <div class="text-xs text-gray-500">{{ item.chargeType }}</div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="text-sm text-gray-900">{{ item.targetGroup }}</div>
                <div class="text-xs text-gray-500">{{ item.targetCount }} 人</div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="text-sm text-gray-900">{{ item.deadline }}</div>
                <div class="text-xs" :class="getDeadlineClass(item.deadline)">{{ getDeadlineStatus(item.deadline) }}</div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="text-sm text-gray-900">{{ item.paidCount }}/{{ item.targetCount }}</div>
                <div class="w-full bg-gray-200 rounded-full h-2 mt-1">
                  <div 
                    class="bg-blue-600 h-2 rounded-full" 
                    :style="{ width: (item.paidCount / item.targetCount * 100) + '%' }"
                  ></div>
                </div>
                <div class="text-xs text-gray-500 mt-1">{{ Math.round(item.paidCount / item.targetCount * 100) }}%</div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <span
                  :class="{
                    'bg-green-100 text-green-800': item.status === '启用',
                    'bg-red-100 text-red-800': item.status === '禁用'
                  }"
                  class="inline-flex px-2 py-1 text-xs font-semibold rounded-full"
                >
                  {{ item.status }}
                </span>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                <div class="flex items-center gap-2">
                  <button
                    @click="handleViewDetails(item)"
                    class="text-blue-600 hover:text-blue-900 transition-colors"
                    title="查看详情"
                  >
                    <EyeIcon class="w-4 h-4" />
                  </button>
                  <button
                    @click="handleEdit(item)"
                    class="text-yellow-600 hover:text-yellow-900 transition-colors"
                    title="编辑"
                  >
                    <PencilIcon class="w-4 h-4" />
                  </button>
                  <button
                    @click="handleToggleStatus(item)"
                    :class="item.status === '启用' ? 'text-red-600 hover:text-red-900' : 'text-green-600 hover:text-green-900'"
                    class="transition-colors"
                    :title="item.status === '启用' ? '禁用' : '启用'"
                  >
                    <component :is="item.status === '启用' ? XMarkIcon : CheckIcon" class="w-4 h-4" />
                  </button>
                  <button
                    @click="handleDelete(item)"
                    class="text-red-600 hover:text-red-900 transition-colors"
                    title="删除"
                  >
                    <TrashIcon class="w-4 h-4" />
                  </button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- 分页 -->
      <div class="px-6 py-4 border-t border-gray-200">
        <div class="flex items-center justify-between">
          <div class="text-sm text-gray-500">
            显示第 {{ (currentPage - 1) * pageSize + 1 }} - {{ Math.min(currentPage * pageSize, filteredItems.length) }} 条，共 {{ filteredItems.length }} 条
          </div>
          <div class="flex items-center gap-2">
            <button
              @click="currentPage--"
              :disabled="currentPage === 1"
              class="px-3 py-1 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
            >
              上一页
            </button>
            <span class="px-3 py-1 text-sm font-medium text-gray-700">
              {{ currentPage }} / {{ totalPages }}
            </span>
            <button
              @click="currentPage++"
              :disabled="currentPage === totalPages"
              class="px-3 py-1 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
            >
              下一页
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 新增/编辑缴费项目弹窗 -->
    <Dialog :open="showAddItemModal || showEditModal" @close="closeModal" class="relative z-50">
      <div class="fixed inset-0 bg-black/30" aria-hidden="true" />
      <div class="fixed inset-0 flex items-center justify-center p-4">
        <DialogPanel class="w-full max-w-2xl rounded-lg bg-white p-6 shadow-xl">
          <DialogTitle class="text-lg font-medium text-gray-900 mb-4">
            {{ showAddItemModal ? '新增缴费项目' : '编辑缴费项目' }}
          </DialogTitle>
          
          <form @submit.prevent="handleSubmit" class="space-y-4">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">项目名称 *</label>
                <input
                  v-model="itemForm.name"
                  type="text"
                  required
                  class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                  placeholder="请输入项目名称"
                />
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">项目编码 *</label>
                <input
                  v-model="itemForm.code"
                  type="text"
                  required
                  class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                  placeholder="请输入项目编码"
                />
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">项目类型 *</label>
                <select
                  v-model="itemForm.type"
                  required
                  class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                >
                  <option value="">请选择类型</option>
                  <option value="学费">学费</option>
                  <option value="住宿费">住宿费</option>
                  <option value="教材费">教材费</option>
                  <option value="保险费">保险费</option>
                  <option value="其他费用">其他费用</option>
                </select>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">收费金额 *</label>
                <input
                  v-model.number="itemForm.amount"
                  type="number"
                  step="0.01"
                  min="0"
                  required
                  class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                  placeholder="请输入金额"
                />
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">收费方式 *</label>
                <select
                  v-model="itemForm.chargeType"
                  required
                  class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                >
                  <option value="">请选择收费方式</option>
                  <option value="按人收费">按人收费</option>
                  <option value="按学期收费">按学期收费</option>
                  <option value="按年收费">按年收费</option>
                  <option value="一次性收费">一次性收费</option>
                </select>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">适用对象 *</label>
                <select
                  v-model="itemForm.targetGroup"
                  required
                  class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                >
                  <option value="">请选择适用对象</option>
                  <option value="全体学生">全体学生</option>
                  <option value="新生">新生</option>
                  <option value="在校生">在校生</option>
                  <option value="住宿生">住宿生</option>
                  <option value="特定专业">特定专业</option>
                </select>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">缴费期限 *</label>
                <input
                  v-model="itemForm.deadline"
                  type="date"
                  required
                  class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                />
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">状态</label>
                <select
                  v-model="itemForm.status"
                  class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                >
                  <option value="启用">启用</option>
                  <option value="禁用">禁用</option>
                </select>
              </div>
            </div>
            
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">项目描述</label>
              <textarea
                v-model="itemForm.description"
                rows="3"
                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                placeholder="请输入项目描述"
              ></textarea>
            </div>
            
            <div class="flex justify-end gap-3 pt-4">
              <button
                type="button"
                @click="closeModal"
                class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors"
              >
                取消
              </button>
              <button
                type="submit"
                class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors"
              >
                {{ showAddItemModal ? '创建' : '保存' }}
              </button>
            </div>
          </form>
        </DialogPanel>
      </div>
    </Dialog>

    <!-- 项目详情弹窗 -->
    <Dialog :open="showDetailsModal" @close="showDetailsModal = false" class="relative z-50">
      <div class="fixed inset-0 bg-black/30" aria-hidden="true" />
      <div class="fixed inset-0 flex items-center justify-center p-4">
        <DialogPanel class="w-full max-w-3xl rounded-lg bg-white p-6 shadow-xl">
          <DialogTitle class="text-lg font-medium text-gray-900 mb-4">
            缴费项目详情
          </DialogTitle>
          
          <div v-if="selectedItem" class="space-y-6">
            <!-- 基本信息 -->
            <div>
              <h3 class="text-md font-medium text-gray-900 mb-3">基本信息</h3>
              <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">项目名称</label>
                  <p class="text-sm text-gray-900">{{ selectedItem.name }}</p>
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">项目编码</label>
                  <p class="text-sm text-gray-900">{{ selectedItem.code }}</p>
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">项目类型</label>
                  <p class="text-sm text-gray-900">{{ selectedItem.type }}</p>
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">收费金额</label>
                  <p class="text-sm text-gray-900">¥{{ formatMoney(selectedItem.amount) }}</p>
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">收费方式</label>
                  <p class="text-sm text-gray-900">{{ selectedItem.chargeType }}</p>
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">适用对象</label>
                  <p class="text-sm text-gray-900">{{ selectedItem.targetGroup }}</p>
                </div>
              </div>
            </div>
            
            <!-- 缴费统计 -->
            <div>
              <h3 class="text-md font-medium text-gray-900 mb-3">缴费统计</h3>
              <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                <div class="bg-blue-50 rounded-lg p-4">
                  <div class="text-sm font-medium text-blue-600">应缴人数</div>
                  <div class="text-2xl font-bold text-blue-900">{{ selectedItem.targetCount }}</div>
                </div>
                <div class="bg-green-50 rounded-lg p-4">
                  <div class="text-sm font-medium text-green-600">已缴人数</div>
                  <div class="text-2xl font-bold text-green-900">{{ selectedItem.paidCount }}</div>
                </div>
                <div class="bg-yellow-50 rounded-lg p-4">
                  <div class="text-sm font-medium text-yellow-600">未缴人数</div>
                  <div class="text-2xl font-bold text-yellow-900">{{ selectedItem.targetCount - selectedItem.paidCount }}</div>
                </div>
                <div class="bg-purple-50 rounded-lg p-4">
                  <div class="text-sm font-medium text-purple-600">缴费率</div>
                  <div class="text-2xl font-bold text-purple-900">{{ Math.round(selectedItem.paidCount / selectedItem.targetCount * 100) }}%</div>
                </div>
              </div>
            </div>
            
            <!-- 项目描述 -->
            <div v-if="selectedItem.description">
              <h3 class="text-md font-medium text-gray-900 mb-3">项目描述</h3>
              <div class="bg-gray-50 rounded-lg p-4">
                <p class="text-sm text-gray-700">{{ selectedItem.description }}</p>
              </div>
            </div>
          </div>
          
          <div class="flex justify-end pt-4">
            <button
              @click="showDetailsModal = false"
              class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors"
            >
              关闭
            </button>
          </div>
        </DialogPanel>
      </div>
    </Dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, nextTick } from 'vue'
import { useAppStore } from '../../stores/app'
import * as echarts from 'echarts'
import {
  Dialog,
  DialogPanel,
  DialogTitle
} from '@headlessui/vue'
import {
  PlusIcon,
  DocumentArrowDownIcon,
  CurrencyDollarIcon,
  BanknotesIcon,
  ExclamationTriangleIcon,
  ClockIcon,
  MagnifyingGlassIcon,
  CheckCircleIcon,
  ArrowDownTrayIcon,
  EyeIcon,
  PencilIcon,
  XMarkIcon,
  CheckIcon,
  TrashIcon
} from '@heroicons/vue/24/outline'

// 使用stores
const appStore = useAppStore()

// 响应式数据
const searchForm = ref({
  keyword: '',
  type: '',
  status: '',
  deadline: ''
})

const showAddItemModal = ref(false)
const showEditModal = ref(false)
const showDetailsModal = ref(false)
const selectedItems = ref([])
const selectedItem = ref(null)
const currentPage = ref(1)
const pageSize = ref(10)
const incomeChartContainer = ref(null)
const pieChartContainer = ref(null)

const itemForm = ref({
  name: '',
  code: '',
  type: '',
  amount: 0,
  chargeType: '',
  targetGroup: '',
  deadline: '',
  status: '启用',
  description: ''
})

// 模拟数据
const financeItems = ref([
  {
    id: 1,
    name: '学费',
    code: 'TUITION_2024',
    type: '学费',
    amount: 5000,
    chargeType: '按学期收费',
    targetGroup: '全体学生',
    targetCount: 1200,
    paidCount: 980,
    deadline: '2024-09-15',
    status: '启用',
    description: '2024学年第一学期学费'
  },
  {
    id: 2,
    name: '住宿费',
    code: 'DORM_2024',
    type: '住宿费',
    amount: 1200,
    chargeType: '按学期收费',
    targetGroup: '住宿生',
    targetCount: 800,
    paidCount: 750,
    deadline: '2024-09-10',
    status: '启用',
    description: '2024学年第一学期住宿费'
  },
  {
    id: 3,
    name: '教材费',
    code: 'BOOK_2024',
    type: '教材费',
    amount: 300,
    chargeType: '按学期收费',
    targetGroup: '全体学生',
    targetCount: 1200,
    paidCount: 1100,
    deadline: '2024-09-20',
    status: '启用',
    description: '2024学年第一学期教材费'
  },
  {
    id: 4,
    name: '保险费',
    code: 'INSURANCE_2024',
    type: '保险费',
    amount: 100,
    chargeType: '按年收费',
    targetGroup: '全体学生',
    targetCount: 1200,
    paidCount: 1050,
    deadline: '2024-10-01',
    status: '启用',
    description: '2024学年学生保险费'
  }
])

// 计算属性
const filteredItems = computed(() => {
  let result = financeItems.value
  
  if (searchForm.value.keyword) {
    result = result.filter(item => 
      item.name.includes(searchForm.value.keyword) ||
      item.code.includes(searchForm.value.keyword)
    )
  }
  
  if (searchForm.value.type) {
    result = result.filter(item => item.type === searchForm.value.type)
  }
  
  if (searchForm.value.status) {
    result = result.filter(item => item.status === searchForm.value.status)
  }
  
  if (searchForm.value.deadline) {
    const now = new Date()
    const threeDaysLater = new Date(now.getTime() + 3 * 24 * 60 * 60 * 1000)
    
    result = result.filter(item => {
      const deadline = new Date(item.deadline)
      
      switch (searchForm.value.deadline) {
        case '未到期':
          return deadline > threeDaysLater
        case '即将到期':
          return deadline > now && deadline <= threeDaysLater
        case '已到期':
          return deadline < now
        default:
          return true
      }
    })
  }
  
  return result
})

const totalPages = computed(() => {
  return Math.ceil(filteredItems.value.length / pageSize.value)
})

const paginatedItems = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return filteredItems.value.slice(start, end)
})

const totalIncome = computed(() => {
  return financeItems.value.reduce((sum, item) => sum + (item.amount * item.paidCount), 0)
})

const paidAmount = computed(() => {
  return financeItems.value.reduce((sum, item) => sum + (item.amount * item.paidCount), 0)
})

const unpaidAmount = computed(() => {
  return financeItems.value.reduce((sum, item) => sum + (item.amount * (item.targetCount - item.paidCount)), 0)
})

const unpaidCount = computed(() => {
  return financeItems.value.reduce((sum, item) => sum + (item.targetCount - item.paidCount), 0)
})

const overdueAmount = computed(() => {
  const now = new Date()
  return financeItems.value
    .filter(item => new Date(item.deadline) < now)
    .reduce((sum, item) => sum + (item.amount * (item.targetCount - item.paidCount)), 0)
})

const overdueCount = computed(() => {
  const now = new Date()
  return financeItems.value
    .filter(item => new Date(item.deadline) < now)
    .reduce((sum, item) => sum + (item.targetCount - item.paidCount), 0)
})

const paidRate = computed(() => {
  const totalTarget = financeItems.value.reduce((sum, item) => sum + item.targetCount, 0)
  const totalPaid = financeItems.value.reduce((sum, item) => sum + item.paidCount, 0)
  return totalTarget > 0 ? Math.round((totalPaid / totalTarget) * 100) : 0
})

// 方法
const formatMoney = (amount) => {
  return amount.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
}

const getDeadlineStatus = (deadline) => {
  const now = new Date()
  const deadlineDate = new Date(deadline)
  const diffDays = Math.ceil((deadlineDate - now) / (1000 * 60 * 60 * 24))
  
  if (diffDays < 0) {
    return `已逾期 ${Math.abs(diffDays)} 天`
  } else if (diffDays <= 3) {
    return `${diffDays} 天后到期`
  } else {
    return `${diffDays} 天后到期`
  }
}

const getDeadlineClass = (deadline) => {
  const now = new Date()
  const deadlineDate = new Date(deadline)
  const diffDays = Math.ceil((deadlineDate - now) / (1000 * 60 * 60 * 24))
  
  if (diffDays < 0) {
    return 'text-red-600'
  } else if (diffDays <= 3) {
    return 'text-yellow-600'
  } else {
    return 'text-green-600'
  }
}

const handleSearch = () => {
  currentPage.value = 1
}

const handleReset = () => {
  searchForm.value = {
    keyword: '',
    type: '',
    status: '',
    deadline: ''
  }
  currentPage.value = 1
}

const handleSelectAll = (event) => {
  if (event.target.checked) {
    selectedItems.value = filteredItems.value.map(item => item.id)
  } else {
    selectedItems.value = []
  }
}

const handleViewDetails = (item) => {
  selectedItem.value = item
  showDetailsModal.value = true
}

const handleEdit = (item) => {
  selectedItem.value = item
  itemForm.value = { ...item }
  showEditModal.value = true
}

const handleToggleStatus = async (item) => {
  const index = financeItems.value.findIndex(i => i.id === item.id)
  if (index > -1) {
    financeItems.value[index].status = item.status === '启用' ? '禁用' : '启用'
    appStore.showNotification(`${item.name} 状态已更新`, 'success')
  }
}

const handleDelete = async (item) => {
  if (confirm(`确定要删除缴费项目 "${item.name}" 吗？`)) {
    const index = financeItems.value.findIndex(i => i.id === item.id)
    if (index > -1) {
      financeItems.value.splice(index, 1)
      appStore.showNotification('删除成功', 'success')
    }
  }
}

const handleBatchEnable = async () => {
  if (selectedItems.value.length === 0) return
  
  selectedItems.value.forEach(itemId => {
    const index = financeItems.value.findIndex(i => i.id === itemId)
    if (index > -1) {
      financeItems.value[index].status = '启用'
    }
  })
  
  selectedItems.value = []
  appStore.showNotification('批量启用成功', 'success')
}

const handleSubmit = async () => {
  if (showAddItemModal.value) {
    // 新增
    const newItem = {
      ...itemForm.value,
      id: Date.now(),
      targetCount: 1200, // 模拟数据
      paidCount: 0
    }
    financeItems.value.push(newItem)
    appStore.showNotification('缴费项目创建成功', 'success')
  } else {
    // 编辑
    const index = financeItems.value.findIndex(i => i.id === selectedItem.value.id)
    if (index > -1) {
      financeItems.value[index] = { ...financeItems.value[index], ...itemForm.value }
      appStore.showNotification('缴费项目更新成功', 'success')
    }
  }
  
  closeModal()
}

const closeModal = () => {
  showAddItemModal.value = false
  showEditModal.value = false
  selectedItem.value = null
  itemForm.value = {
    name: '',
    code: '',
    type: '',
    amount: 0,
    chargeType: '',
    targetGroup: '',
    deadline: '',
    status: '启用',
    description: ''
  }
}

const handleExport = () => {
  const csvContent = [
    ['项目名称', '项目编码', '项目类型', '收费金额', '收费方式', '适用对象', '应缴人数', '已缴人数', '缴费率', '缴费期限', '状态'],
    ...filteredItems.value.map(item => [
      item.name,
      item.code,
      item.type,
      item.amount,
      item.chargeType,
      item.targetGroup,
      item.targetCount,
      item.paidCount,
      Math.round(item.paidCount / item.targetCount * 100) + '%',
      item.deadline,
      item.status
    ])
  ].map(row => row.join(',')).join('\n')
  
  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })
  const link = document.createElement('a')
  link.href = URL.createObjectURL(blob)
  link.download = `缴费项目列表_${new Date().toISOString().split('T')[0]}.csv`
  link.click()
  
  appStore.showNotification('导出成功', 'success')
}

const handleExportReport = () => {
  appStore.showNotification('财务报告导出功能开发中', 'info')
}

const initCharts = () => {
  // 收入趋势图
  if (incomeChartContainer.value) {
    const incomeChart = echarts.init(incomeChartContainer.value)
    
    const incomeOption = {
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月']
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          formatter: '¥{value}万'
        }
      },
      series: [
        {
          name: '收入金额',
          type: 'line',
          data: [120, 132, 101, 134, 90, 230, 210, 180, 650],
          smooth: true,
          itemStyle: {
            color: '#3B82F6'
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: 'rgba(59, 130, 246, 0.3)' },
                { offset: 1, color: 'rgba(59, 130, 246, 0.1)' }
              ]
            }
          }
        }
      ]
    }
    
    incomeChart.setOption(incomeOption)
  }
  
  // 缴费项目分布饼图
  if (pieChartContainer.value) {
    const pieChart = echarts.init(pieChartContainer.value)
    
    const pieOption = {
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: ¥{c}万 ({d}%)'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: '缴费项目',
          type: 'pie',
          radius: '50%',
          data: [
            { value: 490, name: '学费' },
            { value: 90, name: '住宿费' },
            { value: 33, name: '教材费' },
            { value: 10.5, name: '保险费' },
            { value: 26.5, name: '其他费用' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    }
    
    pieChart.setOption(pieOption)
  }
  
  // 响应式调整
  window.addEventListener('resize', () => {
    if (incomeChartContainer.value) {
      echarts.getInstanceByDom(incomeChartContainer.value)?.resize()
    }
    if (pieChartContainer.value) {
      echarts.getInstanceByDom(pieChartContainer.value)?.resize()
    }
  })
}

// 生命周期
onMounted(async () => {
  await nextTick()
  initCharts()
})
</script>